<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
	</head>
	<style>
		#card{
			width: 900px;
			height: 100px;
			border: 1px solid black;
		}
		 /* i{
			border: 1px solid transparent;
			padding: 0px 33px 0px 50px;
			position: relative;
			margin: 20px 0px 0px 20px;
			top: 32px;
			width: 40px;
			height: 10px;
			background-image: url(img/1111.jpg);
			background-repeat: no-repeat;
			background-size: 380%;
			background-position:68% 58% ;
		} */
		div#card i{
			display: block;
			width: 75px;
			height: 16px;
			/* padding: 0px 37px; */
			background-image: url(img/1111.jpg);
		    /* background-size: 380%; */
			background-position: -139px -237px;
			
		}
		.abb{
			color: #b3b3b3;
			border: 1px solid #f0f0f0;
			width: 880px;
			height: 1px;
			margin: 0 auto ;	
		    margin-top: 20px;
			
		}
		textarea{
			margin-top: 20px;
			width: 700px;
			height: 60px;
		}
		#page{
			margin-top:20px;
			width: 900px;
		}
		#page a{ /*加外边框  内边距*/
		border: 1px solid #d2d2d2;
			padding: 4px 10px;
			border-radius: 5px;
			margin-right: 5px;
		}
		#page a.current{
			border:0 ;
			text-decoration: none;
			color: #000000;
		}
		/* background：background-image background-color background-position
		    backeground-size   ba ckground-repeat和backeground-attachment;
		*/
	</style>
	<body>
		<!-- 精灵图 将小图标导出成一张矢量图[png] 好处：图片名称不用其，服务器压力小 -->
		<!-- <i></i> -->
		<!--  思路  html  结构-->
		<div id="card">
			<i></i>
			<div class="abb">————————————————————————————————————————————————————</div>
			<textarea name="" id="" cols="30" rows="10"></textarea>
		</div>
		<!-- <div >
		<a href="" id="1">1
			<a href="" id="2">  2
				<a href="" id="3">  3
					<a href="" id="4">  4
						<a href="" id="5">  5
							<a href="" id="6">
								  6
							</a>
						</a>
					</a>
				</a>
			</a>
		</a>
		</div> -->
		<div id="page">
			<a href="" class="current">1</a>
			<a href="">2</a>
			<a href="">3</a>
			<a href="">4</a>
			<a href="">5</a>
			<a href="">6</a>
		</div>
	</body>
</html>